<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>canvas 练习</title>
		<style type="text/css">
			*{margin: 0px;padding: 0;}
			#bg,#from,#progress{
				display: block;
				position:absolute;
				left: 0;
				top: 0;	
				background: transparent;
				margin: 0 auto;
			}
			#progress{
				text-align: center;
				font-size: 28px;
				color: #ccc;
				width: 240px;
				height: 240px;
				text-indent: -35px;
				line-height: 160px;
			}
		</style>
	</head>
	<body>
		<div id="progress">
			0%
		</div>
		<canvas id="bg" width="200" height="200"></canvas>
		<canvas id="from" width="200" height="200"></canvas>
		
	</body>
	
	<script type="text/javascript">
		var canvasbg = document.getElementById('bg'),
			canvasfrom = document.getElementById('from');
		var bgc = canvasbg.getContext('2d'),
			fromc = canvasfrom.getContext('2d');
//			fromc.rotate(-40*Math.PI/180)
			//背景图
		bgc.beginPath();
		bgc.arc(100,75,50,0,2*Math.PI,false);
		bgc.lineWidth = 3;
		bgc.strokeStyle = "#ccc";
		bgc.stroke();
		
		//加载的数据图
		var count = -25;
		var that = this;
		that.timer = setInterval(function(){
			
			let end =  count  * 2 * Math.PI / 100;
			if(count > 75){
				clearTimeout(that.timer);
				that.timer = null;
			}else{

				fromc.clearRect(0,0,240,240);
				fromc.beginPath();
				fromc.arc(100,75,50,-Math.PI * .5,end,false);
				fromc.lineWidth = 3;
				fromc.strokeStyle = "orange";
				fromc.stroke();
				var progress = document.getElementById('progress');
				progress.innerHTML = `${count+25}%`;
			}
			console.log(count);
			count++;
			
		},10);
		
	</script>
	
</html>
